﻿<!doctype Html>
<html>
	<head>
		<title>海青科技公司</title>
		<meta charset="utf-8">
		<meta name= "keywords" content= "海青科技公司,青岛工学院,青岛web开发, web开发, JavaScript" />
		<meta name= "description" content= "青岛工学院海青科技公司，专注web开发。" />
		<link rel = "stylesheet" type = "text/css" href = "../css/common.css" />
		<link rel = "stylesheet" type = "text/css" href = "css/style.css" />
		<link rel = "stylesheet" type = "text/css" href = "../css/reset.css" />
		<link rel = "stylesheet" type = "text/css" href = "../css/960_12_col.css" />
		<script type = "text/javascript" src = "../js/jquery-1.5.1.min.js"></script>
		<script type = "text/javascript" src = "js/common.js"></script>
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
	<section id = "main">
		<header>
			<div id = "logo" >
				<img src = "../image/logo.png" alt = "海青科技" />
			</div>
			<div id = "top">
				<div id = "search">
						<input type = "text" placeholder="请输入要搜索的内容"/>
						<input type = "submit" value = "搜索" />
				</div>
				<div id = "note">
					<article>
						 <a>设为主页</a>·<a>收藏</a>·<a>RSS</a>
					</article>
				</div>
			</div>
				<nav id = "nav">
						 
						<a href = "../index.html">首页</a>
						<a href = "../intro/intro.html">公司介绍</a>
						<a href = "news.html">公司新闻</a>
						<a href = "../pro/pro.html">产品列表</a>
						<a href = "#">联系我们</a>
					 
				</nav>
		</header>
		<section id = "content">
			<div id = "content_snav"><a href = "../index.html">首页</a>><a href = "news.html">公司新闻</a>><a href ="#">新闻内容</a></div>
			<article id = "content_word">
				<h1>从青岛工学院官方网站制作中学到的</h1>
				<p>因为改名的原因要重新做一下官方的网站，我们公司有幸得到这次机会给学校制作一个门户站。</p> 
<p>写策划的时候老师的要求并不高，一个宣传的页面。我参照了清华的大学的主站样式，得到了基础的构思。</p> 
<p>学校的网站主要的功能是对外的宣传，表现出学校的风貌和精神。所以网站的风格要比较大气和简洁。而且想得到一个好的用户体验，不光是布局和内容要设计好。细微之处更是非常重要。</p> 
<p>主色调是我一直中意的蓝色，我在做网站大背景图的时候下了很大的功夫调整背景色的色相，研究哪一种蓝色更加的适合这个站。我想到的是，用户进来这个站，首先要感到眼前一亮，而且在亮完了之后还能够有耐心的继续浏览下去。海蓝色算是一个比较能够被视觉习惯接受的颜色，所以我做了一个海蓝色的渐变。但是配上了简易的LOGO之后我发现这种感觉跟我想要的海的感觉是不一样的，冥思苦想了很久，终于明白原来单单是渐变的话很难体现出海洋的质感，那么怎样得到海洋的质感呢？我考虑到，海里面最多的是什么呢？水！而对于水这种对象来说（Java说万物都是对象。。。），它的属性之一就是透明。透明的概念是让光穿透过去，所以我加入了一些高亮的地方，体现出光感，虽然不是很明显，但是海洋的感觉已经有了。</p> 
<p>如果不是做学校的网站的话，那个学校大门的透明图片我是死都不会加的，破坏了整体效果，而且也没有显得这个学校因为这个图片能给用户一个更好的印象，纯粹是多余，奈何我在写策划的时候为了让领导满意，只能这么加一个图片上去。。<br /> 
导航的动态效果我在写策划书的时候就已经计划好是用JQuery来写，对于我这种偏向于设计的前台代码民工来讲，有了一定的动态效果是得到好的用户体验的基石。当然这个灵感还是来源于清华大学的网站。说实话，这个网站有很多地方都是模仿清华大学的网站来做的。当然，如果能得到好的印象，模仿不是什么坏事，这跟抄袭是不一样的。</p> 
<p>对于Jquery使用的熟练度问题我需要检讨，研究了整个一个寒假的Javascript居然连基本的东西都不会，真的是让我感觉到自己的笨拙。在本学期学习了C语言之后，我感觉自己似乎明白了一些什么，譬如编程的一些最基本的思想，语法。在这次的项目里我负责的两个模块都应用到了Jquery的技术，这真的让我感觉到很是吃力。我明白有些函数的作用，可是一旦自己去写，就丝毫没有头绪。可能是写的少的原因，我打算以后又时间就写一些JS的代码来提高自己的熟练度。我有这个自信，希望也有这个毅力。<br /> 
贴上这段代码：</p> 
<pre class="brush: js"> 
/* Menu */
jQuery('#nav .topnav li').each(function(index){ //对每一个li标签都执行function动作
jQuery(this).hover( //当li被选择执行function
function(){
var _self = this; //将当前对象赋值给_self
clearTimeout(mouseout_tid[index]); // mouseout_tid[index]这一句moseout tid不懂
mouseover_tid[index] = setTimeout(function() { //延时显示400ms
jQuery(_self).find('ul:eq(0)').fadeIn(200); //寻找所有ul中的第一个li标签执行fadeIn
}, 400);
},
 
function(){
var _self = this;
clearTimeout(mouseover_tid[index]);//终止定时器
mouseout_tid[index] = setTimeout(function() {
jQuery(_self).find('ul:eq(0)').fadeOut(150);
}, 300);
}
);
});
</pre> 
<p>这段代码在写这篇文章的时候我翻阅了Javascript用户手册，对一些概念突然明白。</p> 
<p>但还是有一些地方不懂，比如为何要在延时之前加上	clearTimeout(mouseover_tid[index]); 这么一句，它的作用是终止定时器。而mouseover_tid[index]这句代码的意思不是很明白，我姑且猜测是用来定位当前选择的对象的“ID”吧。setTimeout是一个延时器，这个我倒是明白了。ul:eq(0),eq()方法今天我接触了，是获取第N个元素的意思。那么ul:eq(0)的意思的选择第一个ul还是选择ul中的第一个li呢，还有待研究。</p> 
<p>导航栏是典型的蓝白配色，a:hover的配色就是相反色，这个是很典型的，也可以使整个风格点缀的更加的简洁。</p> 
<p>Banner的设计算是这个网站最大的亮点，外形是带有弧线的图片幻灯。这个功能实现的方法是利用了遮罩层的概念。在网站中运用绝对定位，把遮罩层的z-index设置为最高，幻灯层其次。遮罩层到现在还有一个没有解决的问题就是PNG图片的杂边问题，其实在chorm浏览器中，已经用png-24解决了这个问题，但是用IE6访问就很悲剧的没法显示透明度。后来在网上查到可以通过一段CSS或者JS代码来解决IE6的这个问题。看起来貌似很麻烦啊，这个且以后再说。</p> 
<p>这段JS代码就不发了，大抵是用Jquery完成的，也用到了setInterval这个延时执行函数。对于setInterval，网上说有很多地方可以用到，其实很多JS代码都经常用到，而我知道的寥寥无几，所以要Good Good Study啊！</p> 
<p>正式的内容板块里我负责的只有名师简介的制作。依然是JS实现。我发现这个网站所有涉及到JS代码的任务我都参加了，这是太巧了。。。法克。</p> 
<p>说说这个模块的实现。</p> 
<p>思路和基本的方法都是毅哥提供的，最后的调试和修改也都是他完成的，但怎么着我也是算是这个模块的负责人。。</p> 
<p>页面的内容是这样的：左面是老师的照片，右面是老师的介绍，这两块放在一个div里面。然后有一个覆盖滚动的动画效果。现在我知道有的时候我们分析一个网站的动态效果的时候很容易想岔了。当初我的想法就是依次将放置每个老师资料的DIV向上移动，达到滚动的效果。而真正毅哥跟我说如何实现这个模块的时候，我才知道，原来一些动画效果纯属是用视觉上的错觉糊弄人的。<br /> 
真正的实现效果是这样的，最上面的显示层从下往上隐藏，底下的层显示。就这么简单。<br /> 
上代码：</p> 
<pre class="brush: js"> 
/* Teach Intro */
//名师介绍滚动幻灯
//author: moe
 
function cnav(i) {
var a=$("#t_nav&amp;gt;div").eq(i);//选择最上面的简介DIV,赋值给A
var b=$("#t_nav&amp;gt;div").eq((++i)%3);//选择第二层div,赋值给B
a.css("z-index","1");   //改变最上层DIV的z-index,让其显示在最上方
b.css("z-index","0");   //第二层的z-index在第一层的下方（有用的废话）
b.css("display","block");//让第二层的显示状态为默认
a.slideUp(1000, function() {//第一层执行slideup方法。
a.css("z-index","0");   //在执行完slideup后让a,b的z-index调换，让第二层变成一层
b.css("z-index","1");
});
}
setInterval("cnav((++i)%3); ",8000);//每八秒执行一次cnav函数
</pre> 
<p>这段代码真正的精髓是在cnav这段函数里。不断的改变第一层和第二层的z-index，以达到互相遮盖的效果。而历遍所有div这个功能是由(++i)%3这个表达式完成的。这样的取余计算会让i的值在0到div的数量之间循环，从而达到历遍的效果。slideUp这个方法是用动态的方式让元素从可见变为不可见。在这段代码中，一旦元素不可见了，也就是第一层的slideup执行完毕，第一层的z-index会变小，变成后面的一层。以前的第二层以显示的状态变成了第一次，如此循环。</p> 
<p>写完了这段代码，我感觉自己又学到了很多，比如一些效果实现的思想，如何用简洁的代码写出更加出色的效果是我应该考虑的。<br /> 
这个网站我们足足写了一天半的时间。一开始的时候感觉一个静态页面如果一个人也用不了这么长时间。而当我真正的上手去写的时候发现没有这么简单。从布局到每一个模块的详细编写，都需要经过慎重的思考，反复的调试，经久的修改才能够正式的拿出来给用户看。想要达到一个良好的用户体验真的不是一次两次就能够成功的。</p> 
<p>我知道异次元软件世界这个网站，它的美工，编程，SEO优化和后台程序的编写都是由站长一个人完成的，现在我是十分的敬佩他。。<br /> 
而这次任务更加的让我感觉到团队合作的快乐。尤其是在这个人性逐渐淡薄的年代，有一群有着强大的向心力的群体在一起工作，那是十分幸福的事儿。当然也有一部分愿意是我喜欢这种办公无纸化、专业化、企业化的环境。从编码到任务的发布都是通过网络进行的，任务列表在桌面上放着，明确自己的任务，才能让自己的工作效率达到最高，而工作效率有了，心情自然就好。</p> 
<p>我希望自己能够找到更多的真正钟爱技术、有团队精神的同学。技术这条路上注定了要有艰辛，要耐得住寂寞。人生难得知己，在这条路上有人与我共同欣赏风景，那会是一件幸福的事。人多力量大，团队能起到的作用不仅仅是攻克项目，而且能让团队中的每一个成员都能学到很多。为团队贡献一份力量也能让自己做完一项任务的时候收获真实的自豪感。</p> 
<p>我心目中的大学就是这样，有一股力量，把钟爱同一种东西的人们凝聚在一起。各自发挥自己的力量，让自己和团队中的朋友们都能够有所提高。我的心里是拒绝平庸的，所以我不甘心自己在团队里被落下，这也是在团队中学习到的。</p> 
			</article>
			<input type = "button" value = "打印本页" class = "print" />
		</section>
		<footer>
		<article id = "footer_contect">	
			<section id = "footer_contect_left">
				<p>? 2010 - 2011 海青科技公司</p>
				<p>文网文[2011]0012-005</p>
				<p>email: hr@hqwiki.cn</p>
				<p>moe@hqwiki.cn</p>
			</section>
			<section id = "footer_contect_right">
				<p>地址：山东省胶州市青岛工学院</p>
				<p>电话：18765932730</p>
				
			</section>
		</article>
	</footer>
	</body>

</html>